<template>
  <div class="page-container">
    <div class="page-content">
      <section class="section section1">
        <img src="@/assets/images/1-1.png" class="width100" />
        <div @click="handleWeixinClick" class="link"></div>
      </section>
      <section class="section section2">
        <img src="@/assets/images/2-1.png" class="img2-1" />
        <img src="@/assets/images/2-2.png" class="img2-2" />
      </section>
      <section class="section section3">
        <img src="@/assets/images/3-1.png" class="img3-1" />
        <div class="tab">
          <div
            class="item"
            :class="{ active: tabActive === item.id }"
            @click="handleClickTab(item.id)"
            v-for="item in tabList"
            :key="item.id"
          >
            <img
              v-if="tabActive === item.id"
              :src="require(`@/assets/images/icon-${item.id}-a.png`)"
              class="icon"
            />
            <img
              v-else
              :src="require(`@/assets/images/icon-${item.id}.png`)"
              class="icon"
            />
            <p class="text">{{ item.title }}</p>
          </div>
        </div>
        <div class="tab-content">
          <div
            class="item"
            v-for="item in tabList"
            :key="item.id"
            :class="{ active: tabActive === item.id }"
          >
            <img
              :src="require(`@/assets/images/3-2-${item.id}.png`)"
              class="img3-2"
            />
            <div class="left">
              <div class="title">
                {{ item.title }}
              </div>
              <div class="desc">
                {{ item.desc }}
              </div>
              <div @click="handleWeixinClick" class="link">
                <img src="@/assets/images/3-3.png" class="img3-3" />
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="section section4">
        <div class="content">
          <img src="@/assets/images/4-1.png" class="img4-1" />
          <div class="question-list">
            <div class="item">
              <div class="question">资产处置合作是什么服务项目？</div>
              <div class="answer">
                Feijiu网推出资产处置合作服务新项目，依靠Feijiu网海量商机信息为基础，结合客户生意需求，通过资产合作部整合资源，人工精选匹配商机，优先推送，意向商机跟进洽谈议价最终达成回收合作，从而缩短客户找信息、谈生意时间，提高生意成交率，不断优化废旧交易结构，真正实现处置企业、回收企业、行业三赢的局面。
              </div>
            </div>
            <div class="item">
              <div class="question">
                资产处置合作和Feijiu网会员服务有什么区别？
              </div>
              <div class="answer">
                资产处置合作服务相比会员服务，更加注重信息质量和成交效果，在信息服务与生意洽谈跟进上增加人工服务环节。信息服务，将通过人工精选匹配之后优先推送给您，节约自主查找时间，信息更加优质、精准、快速；跟进交易，人工联系处置客户和回收客户，提前洽谈，掌握意向商机情况，做好跟进对接服务，方便您更好的把握自己的交易尺度。
              </div>
            </div>
            <div class="item">
              <div class="question">如何加入资产处置合作？</div>
              <div class="answer">
                您只需要完成<span @click="handleWeixinClick" class="link"
                  >一键签约</span
                >即可加入并享受此项服务。
              </div>
            </div>
            <div class="item">
              <div class="question">
                已经是付费会员了可以直接享受资产处置合作服务吗？
              </div>
              <div class="answer">
                您需要完成<span @click="handleWeixinClick" class="link"
                  >一键签约</span
                >操作方可确认加入。
              </div>
            </div>
            <div class="item">
              <div class="question">加入后普通会员和付费会员有啥区别？</div>
              <div class="answer">
                优质商机推送顺序将根据Feijiu网会员等级由高到低进行推送，Feijiu网会员等级越高，商机获取时间越早。
              </div>
            </div>
            <div class="item">
              <div class="question">为什么要收费？</div>
              <div class="answer">
                资产处置合作服务，由专业的团队运作，掌握充沛的上下游企业处置和回收需求，通过人工进行信息过滤、筛选匹配、跟进洽谈、协助议价等花费大量时间和精力为客户节约时间和成本，解决合作双方成交问题，高质精准有效果。
              </div>
            </div>
            <div class="item">
              <div class="question">怎么收费？</div>
              <div class="answer">
                按成交次数收取服务费，仅需200元/次。<br />通过资产处置合作服务成交的订单，仅收取服务费200元/次，不成交不收费。采用在线支付方式。
              </div>
            </div>
            <div class="item">
              <div class="question">推送的信息不想要，不精准怎么办？</div>
              <div class="answer">
                1
                打开个人中心，修改偏好设置，完善您的个人标签，标签越精准推送越精准；
                <br />2 致电资产合作部电话，帮您完善标签和生意需求记录。
              </div>
            </div>
            <div class="item">
              <div class="question">生意做不成，没有成交怎么办？</div>
              <div class="answer">
                只要您是资产处置合作签约客户，我们将长期的跟进您的生意需求，为您分析原因，解决问题，持续的为您匹配商机、跟进洽谈，全程无其他费用。
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="section section5">
        <img src="@/assets/images/5-1.png" class="width100" />
        <div @click="handleWeixinClick" class="link">
          <img src="@/assets/images/5-2.png" class="img5-2" />
        </div>
      </section>
      <section class="section section6">
        <p class="text">
          *本活动最终解释权归中废通网络技术有限公司*<br />
          冀公网安备 13010202001502号 增值电信业务经营许可证<br />
          冀ICP证B2-20140159 冀ICP备11010607号-1
        </p>
      </section>
      <div class="sidebar">
        <div class="content">
          <div
            class="item"
            :class="{ active: showWx }"
            @mouseenter="showWx = true"
            @mouseleave="showWx = false"
            @click="handleWeixinClick"
          >
            <img src="@/assets/images/6-1.png" class="img6-1" />
            <p class="text">微信咨询</p>
          </div>
          <div class="item">
            <div @click="handleWeixinClick" class="link">
              <img src="@/assets/images/3-3.png" class="img3-3" />
            </div>
          </div>
          <div
            class="item"
            :class="{ active: showPhone }"
            @mouseenter="showPhone = true"
            @mouseleave="showPhone = false"
            @click="handlePhoneClick"
          >
            <img src="@/assets/images/6-2.png" class="img6-1" />
            <p class="text">电话咨询</p>
          </div>
        </div>
        <div v-show="showWx" class="popup">
          <img src="@/assets/images/6-3.png" class="img6-3" />
          <p class="text">扫一扫添加<br />资产合作部专员</p>
        </div>
        <div v-show="showPhone" class="popup popup-phone">
          <p class="text-phone">133-4321-0279</p>
          <p class="text">资产合作部电话</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      tabActive: 1,
      link: window.link,
      showWx: false,
      showPhone: false,
      timer: null,
      tabList: [
        {
          id: 1,
          title: '在线签约',
          desc: '在线一键签约即可开通Feijiu网资产处置合作服务，享受优质商机推送、生意全流程人工跟踪、撮合交易等服务。',
        },
        {
          id: 2,
          title: '设置回收偏好',
          desc: '完善您的回收偏好，让我们更精准的为您推送生意信息~',
        },
        {
          id: 3,
          title: '商机推送',
          desc: '多种推送方式，让您第一时间获得生意信息！',
        },
        {
          id: 4,
          title: '人工撮合',
          desc: '资产合作部专员第一时间帮您议与处置方价、跟进洽谈、撮合成交，请放心接听来电',
        },
        {
          id: 5,
          title: '成交付费',
          desc: '先体验服务再付款，生意成交后需支付服务费200元/单',
        },
      ],
    };
  },
  mounted() {
    this.startTimer();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    startTimer() {
      clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(() => {
        console.log(this.tabActive);
        this.tabActive = (this.tabActive % 5) + 1;
      }, 5000);
    },
    handleClickTab(n) {
      this.tabActive = n;
      this.startTimer();
    },
    // 微信咨询
    handleWeixinClick() {
      window.location.href =
        'https://wap.feijiu.net/towxmini.html?source=scheme ';
    },
    // 拨打电话
    handlePhoneClick() {
      window.location.href = 'tel:155-1244-7985';
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.page-container {
  font-family: PingFangSC-Regular, PingFang SC;
  background: #fafcfe;
  padding-bottom: 110px;
}
.section {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.width100 {
  width: 100%;
}
.pointer {
  cursor: pointer;
}
.section1 .link {
  position: absolute;
  left: 250px;
  top: 480px;
  width: 250px;
  height: 110px;
  cursor: pointer;
  opacity: 0;
  background: red;
}
.section2 .img2-1 {
  width: 600px;
  margin-top: 135px;
  margin-bottom: 40px;
}
.section2 .img2-2 {
  width: 700px;
}

.section3 {
  padding-bottom: 60px;
}
.section3 .img3-1 {
  width: 289px;
  margin-top: 103px;
  margin-bottom: 52px;
}

.tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.tab .item {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  border-radius: 5px;
  padding: 0 20px;
  font-size: 28px;
  margin-right: 30px;
  cursor: pointer;
}

.tab .item:last-child {
  margin-right: 0;
}

.tab .item.active {
  background: #0659f1;
  color: #ffffff;
}

.tab .item .icon {
  width: 26px;
  height: 26px;
  margin-right: 10px;
}

.tab-content .item {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none;
}
.tab-content .item.active {
  display: flex;
}

.tab-content .left {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.tab-content .left .title {
  font-size: 32px;
  color: #323233;
  line-height: 45px;
  margin-bottom: 20px;
  font-weight: bold;
}
.tab-content .left .desc {
  width: 686px;
  height: 74px;
  font-size: 26px;
  text-align: center;
  color: #405371;
  line-height: 37px;
  margin-bottom: 30px;
  animation-delay: 0.1s !important;
}
.tab-content .left .img3-3 {
  width: 222px;
  animation-delay: 0.5s !important;
}

.tab-content .item .img3-2 {
  width: 687px;
}

.section4 {
  width: 100%;
  background: url(../assets/images/4-3.png) no-repeat center top / 100% 100%;
  padding: 50px 25px 30px;
}
.section4 .content {
  width: 700px;
  background: #ffffff;
  padding: 80px 30px 70px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.section4 .content .img4-1 {
  width: 334px;
  margin-bottom: 70px;
}

.question-list .item {
  margin-bottom: 50px;
  font-size: 24px;
  color: #666666;
  line-height: 48px;
  padding-left: 44px;
  position: relative;
}
.question-list .item::before {
  content: '';
  width: 32px;
  height: 32px;
  background: url(../assets/images/4-2.png) no-repeat center 100% / 100%;
  position: absolute;
  left: 0;
  top: 6px;
}
.question-list .item .question {
  font-size: 26px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
}
.question-list .item .link {
  color: #006efe;
  font-weight: bold;
  cursor: pointer;
}

.section5 .link {
  width: 158px;
  position: absolute;
  left: 68px;
  top: 154px;
}
.section5 .img5-2 {
  width: 100%;
}
.sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 110px;
  border-top: 2px solid #eeeeee;
  background: #ffffff;
  padding-top: 10px;
}

.sidebar .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 50px;
  font-size: 28px;
  color: #000000;
  font-weight: bold;
}

.sidebar .content .item {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.sidebar .content .img3-3 {
  width: 222px;
}
.sidebar .content .img6-1 {
  width: 32px;
  margin-right: 10px;
}

.sidebar .popup {
  width: 186px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  position: absolute;
  left: -200px;
  top: -30px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.sidebar .popup:after {
  content: '';
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left-color: #ffffff;
  position: absolute;
  right: -16px;
  top: 40%;
}

.sidebar .popup .img6-3 {
  width: 140px;
  height: 140px;
  margin-bottom: 10px;
}

.sidebar .popup-phone {
  top: 90px;
}
.sidebar .popup-phone .text-phone {
  font-size: 18px;
  font-weight: bold;
  color: #006efe;
  line-height: 28px;
  margin-bottom: 6px;
}

.section6 {
  width: 750px;
  background: #000000;
  padding: 30px 0;
  font-size: 24px;
  color: #ffffff;
  line-height: 33px;
  text-align: center;
}
</style>
